<template>
    <div class="p-2" v-loading="loading">
        <searchrevealing>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="98px">
                <el-form-item label="创建时间" prop="time">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="queryParams.time" type="daterange"
                        range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" clearable
                        style="width: 220px" @change="timeChange" />
                </el-form-item>
                <el-form-item label="通知类型" prop="configCode">
                    <el-select v-model="queryParams.configCode" placeholder="请选择归还状态" clearable style="width: 220px">
                        <el-option v-for="dict in returnStatusList" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="form_button">
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </div>
        </searchrevealing>
        <el-card shadow="never">
            <template #header>
                <el-col :span="1.5">
                    <el-button type="primary" :disabled="!multipleSelection.length" plain
                        @click="read('一键已读', multipleSelection)">一键已读</el-button>
                    <el-button type="danger" :disabled="!multipleSelection.length" plain
                        @click="setDelete('delete', multipleSelection)">删除</el-button>
                    <el-button type="info" :disabled="!multipleSelection.length" plain
                        @click="read('一键未读', multipleSelection)">一键未读</el-button>
                </el-col>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'消息通知'"
                    @updateColumn="getColmun"></right-toolbar>
            </template>
            <el-table ref="multipleTableRef" v-loading="loading" :data="tableData" border
                @selection-change="handleSelectionChange" @header-dragend="dragEnd">
                <el-table-column type="selection" width="55" align="center" :fixed="true" />
                <el-table-column v-for="(item, index) in outBoundRecordColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <div v-if="item.prop === 'content'">
                            <el-badge v-if="scope?.row.readTag == 0" is-dot
                                :badge-style="{ top: '50%', left: '-10px', transform: 'translate(0, -100%)' }">
                                <div v-html="scope.row.content"></div>
                            </el-badge>
                            <div v-else v-html="scope.row.content"></div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" @click="read('查看', scope.row)" class="color_theme">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
        </el-card>
    </div>
</template>



<script setup name="OutBoundRecord" lang="ts">
import { ref } from 'vue'
import { queryDeptMsg, readList, deleteList } from '@/api/basic/flowable/index'
import useUseNotice from '@/store/modules/notice';
import { ElMessageBox } from 'element-plus'
import type { Action, TableInstance } from 'element-plus'

const useNotice = useUseNotice();
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<Array<any>>([])
const queryFormRef = ref<ElFormInstance>();
const { proxy } = getCurrentInstance() as any;
const loading = ref(false)
const tableData = ref<any>([])
const total = ref(0)
const showSearch = ref(true);
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    startTime: '',
    endTime: '',
    type: 1,
    time: [],
    configCode: ''
})
const columnData = ref()
const returnStatusList = ref<any>([
    { label: '过期提醒', value: '1' },
    { label: '系统公告', value: '2' },
    { label: '借调信息', value: '6' },
])
const outBoundRecordColumns = ref()

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    useNotice.QueryDeptCount()
    getList();
};

const handleSelectionChange = (val: Array<any>) => {
    multipleSelection.value = val
}

// 查看
const read = async (type: string, data: any) => {
    if (type === '查看') {
        try {
            if (data.readTag == 0) {
                loading.value = true
                await readList({ type: 0, codes: [data.code] })
                useNotice.QueryDeptCount()
                let index = tableData.value.findIndex((item: any) => {
                    return item.code === data.code
                })
                if (index != -1) {
                    tableData.value[index].readTag = 1
                }
                loading.value = false
            }
            ElMessageBox.alert(data.content, '通知', {
                confirmButtonText: '知道啦',
                dangerouslyUseHTMLString: true,
                callback: (action: Action) => {
                    if (action === 'confirm') {
                        // setDelete('one', data)

                    }
                },
            })
        } catch (error) {
            loading.value = false
        }
    } else {
        loading.value = true
        try {
            let arr: any = []
            data.forEach((item: any) => {
                arr.push(item.code)
            });
            await readList({ type: type === '一键已读' ? 0 : 1, codes: arr })
            loading.value = false
            useNotice.QueryDeptCount()
            getList();
        } catch (error) {
            loading.value = false
        }
    }
}
// 删除
const setDelete = async (type: string, data: any) => {
    loading.value = true
    try {
        if (type === 'one') {
            await deleteList({ codes: [data.code] })
        } else {
            let arr: any = []
            data.forEach((item: any) => {
                arr.push(item.code)
            });
            await deleteList({ codes: arr })
        }
        useNotice.QueryDeptCount()
        loading.value = false
        getList();
    } catch (error) {
        loading.value = false
    }
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startTime = ''
    queryParams.value.endTime = ''
    handleQuery();
};
const timeChange = (val: any) => {
    if (val) {
        queryParams.value.startTime = val[0]
        queryParams.value.endTime = val[1]
    } else {
        queryParams.value.startTime = ''
        queryParams.value.endTime = ''
    }
}
const getList = async () => {
    loading.value = true
    try {
        const res = await queryDeptMsg(queryParams.value)
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}

/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('消息通知')
    outBoundRecordColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
onMounted(async () => {
    await getColmun();
    getList()
})

</script>
<style lang="scss" scoped>
.mb96 {
    margin-bottom: 96px;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: flex-end;
}

.form_button {
    display: flex;
    justify-content: flex-end;
}
</style>